<template>
  <div class="app-container" style="padding-top: 0; padding-bottom: 0">
    <!-- highlight-current-row  是否要高亮当前行 -->
    <!-- row-click  当某一行被点击时会触发该事件 -->
    <el-table
      :data="table.tableData"
      style="width: 100%"
      ref="singleTable"
      @row-click="singleElection"
      highlight-current-row
    >
      <el-table-column align="center" width="55" label="选择">
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <!-- 注意：这里写 &nbsp 的目的是為了页面不顯示内容，只顯示单选操作 -->
          <el-radio
            class="radio"
            v-model="templateSelection"
            :label="scope.row.userId"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="userName">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="性別"
        align="center"
        prop="sex"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="聯繫方式"
        align="center"
        prop="phonenumber"
      />
      <el-table-column
        show-overflow-tooltip
        label="郵箱"
        align="center"
        prop="email"
      />
      <el-table-column
        show-overflow-tooltip
        label="部門"
        align="center"
        prop="dept.deptName"
      />
    </el-table>
    <pagination
      v-show="table.total > 0"
      :total="table.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">確 定</el-button>
    </div>
  </div>
</template>
  
  <script>
import { listUser } from "@/api/system/user";
export default {
  name: "TablePage5",
  dicts: [
    "sys_user_sex",
  ],
  props: ["selected"],
  data() {
    return {
      table: {
        total: 0,
        tableData: [],
      },
      //   当前选择的行的id
      templateSelection: this.selected,
      //   当前选择的行的数据
      checkList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    singleElection(row) {
      // console.log(row);
      this.templateSelection = row.userId;
      this.checkList = this.table.tableData.filter(
        (item) => item.userId === row.userId
      );
      console.log(`该行的编号為${row.userId}`);
    },
    getList() {
      this.loading = true;
      listUser(this.queryParams)
        .then((res) => {
          this.table.tableData = res.rows;
          this.table.total = res.total;
          this.table.tableData.map((item) => {
            if (this.templateSelection == item.userId) {
              this.$refs.singleTable.setCurrentRow(item);
            }
          });
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    submitForm() {
      console.log(this.checkList);
      this.checkList;
      if (this.checkList.length == 0) {
        this.cancel();
      } else {
        let obj = {
            userId: this.checkList[0].userId,
          receiverName: this.checkList[0].userName,
        };
        this.$emit("out_detail", obj);
      }
    },
    cancel() {
      this.$emit("out_cancel");
    },
  },
};
</script>
  
  <style>
.el-radio__label {
  display: none;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
  
  